<template>
    <div class="avatar_warp">
        <div class="title">
            <span>修改头像</span>
        </div>
        <div class="content">
            <el-upload class="avatar-uploader" :auto-upload="true" ref="uploadAvatar"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG.PNG"
                :action="'' | baseUpPUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
                :on-error="handleAvatarError" :on-change="onchange" :before-upload="beforeAvatarUpload">
                <img v-if="userInfo.photo" :src="userInfo.photo | pictureUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="explain">
                <el-button type="primary" @click="submitUpload">保存</el-button>
                <p>
                    <span>上传格式为jpg、jpeg、png且不能超过1MB</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo
            })
        },
        created() {
            // this.getCurrentPicture()
        },
        mounted(){
            // this.$store.dispatch('personalModule/getUserInfo', {
            //     id: this.userInfo.id
            // }).then(res =>{
            //     if(res.data.code == 200){
            //         this.$store.commit("userModule/INIT_USERINFO_DATA",res.data.result[0])
            //     }
            // })
        },
        data() {
            return {
                loading: null,
                fileList: []
            }
        },
        methods: {
            //当上传图片后，调用onchange方法，获取图片本地路径
            onchange(file, fileList) {
                this.fileList = fileList
            },
            // 上传图像
            submitUpload() {
                if (this.$refs.uploadAvatar.uploadFiles.length <= 0) {
                    this.$message({
                        message: '请先选择头像后保存',
                        type: 'warning'
                    });
                } else {
                    const loading = this.$loading({
                        lock: true,
                        text: '保存中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.2)'
                    });
                    this.$store.dispatch('personalModule/saveUserInfo', {
                        id: this.userInfo.id,
                        photo: this.fileList[0].response.result.originalUrl
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: '修改成功，下次登录后生效',
                                type: 'success'
                            });
                            // this.$store.dispatch("userModule/findByUserIdInfo")
                            // this.$store.dispatch('personalModule/getUserInfo', {
                            //     id: this.userInfo.id
                            // }).then(res =>{
                            //     if(res.data.code == 200){
                            //         this.$store.commit("userModule/INIT_USERINFO_DATA",res.data.result[0])
                            //     }
                            // })
                            this.isEdit = true;
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                        loading.close();
                    }).catch(err => {
                        loading.close();
                        this.$message.error('服务器内部错误！保存失败！');
                    })
                }

            },

            handleAvatarSuccess(res, file) {
                if(res.code == 400){
                    this.$message.warning("图片上传失败！")
                }
                if(file.response){
                    this.userInfo.photo= file.response.result.originalUrl
                }
                // this.$store.dispatch('personalModule/getUserInfo', {
                //     id: this.userInfo.id
                // })
            },

            handleAvatarError(err, file, fileList) {
                this.loading.close()
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/jpg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 1;
                if (!isJPG) {
                    this.$message.error('上传头像图片格式为jpg、jpeg、png');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                if (isJPG && isLt2M) {
                    this.file = file
                }
                return isJPG && isLt2M;
            },

            // 获取当前头像
            // getCurrentPicture() {
            //     this.$store.dispatch('personalModule/getUserInfo', {
            //         id: this.userInfo.id
            //     })
            // }
        },
    }
</script>

<style lang="scss" scoped>
    .avatar_warp {
        width: 100%;

        .title {
            text-align: left;
            border-bottom: 1px solid #DCDFE6;
            box-sizing: border-box;
            padding-bottom: 10px;
        }

        .content {
            box-sizing: border-box;
            padding-top: 10px;
            text-align: center;

            .avatar-uploader {
                text-align: center;
            }

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
                border-radius: 6px;
                cursor: pointer;
                border: 1px dashed #d9d9d9;
                border-radius: 50%;
            }

            .avatar-uploader-icon:hover {
                border-color: #409EFF;
            }

            .avatar {
                width: 178px;
                height: 178px;
                display: block;
                border-radius: 50%;
            }

            .explain {
                box-sizing: border-box;
                padding: 10px 0;
                font-size: 16px;
                color: #8c939d;
                text-align: center;
            }
        }
    }
</style>